/**
 * Colors
 * -------------------------------------------------------------------------- */

:root {
--vp-c-brand: #ec5c2f;
--vp-c-brand-second: #f0d53b;
--vp-c-brand-light: #eb7956;
--vp-c-brand-lighter: #eb957b;
--vp-c-brand-lightest: #eeaa95;
--vp-c-brand-dark: #e64a1b;
--vp-c-brand-darker: #d13b0e;
--vp-c-brand-dimm: rgba(100, 108, 255, 0.08);
--font: Menlo, Monaco, "Courier New", monospace;
}

/**
* Component: Button
* -------------------------------------------------------------------------- */

:root {
--vp-button-brand-border: var(--vp-c-brand-light);
--vp-button-brand-text: var(--vp-c-white);
--vp-button-brand-bg: var(--vp-c-brand);
--vp-button-brand-hover-border: var(--vp-c-brand-light);
--vp-button-brand-hover-text: var(--vp-c-white);
--vp-button-brand-hover-bg: var(--vp-c-brand-light);
--vp-button-brand-active-border: var(--vp-c-brand-light);
--vp-button-brand-active-text: var(--vp-c-white);
--vp-button-brand-active-bg: var(--vp-button-brand-bg);
}

/**
* Component: Home
* -------------------------------------------------------------------------- */

:root {
--vp-home-hero-name-color: transparent;
--vp-home-hero-name-background: -webkit-linear-gradient(
    120deg,
    var(--vp-c-brand-second) 30%,
    var(--vp-c-brand)
);

--vp-home-hero-image-background-image: linear-gradient(
    -45deg,
    var(--vp-c-brand-second) 50%,
    var(--vp-c-brand) 50%
);
--vp-home-hero-image-filter: blur(40px);
}

@media (min-width: 640px) {
:root {
    --vp-home-hero-image-filter: blur(56px);
}
}

@media (min-width: 960px) {
:root {
    --vp-home-hero-image-filter: blur(72px);
}
}

/**
* Component: Custom Block
* -------------------------------------------------------------------------- */

:root {
--vp-custom-block-tip-border: var(--vp-c-brand);
--vp-custom-block-tip-text: var(--vp-c-brand-darker);
--vp-custom-block-tip-bg: var(--vp-c-brand-dimm);
}

.dark {
--vp-custom-block-tip-border: var(--vp-c-brand);
--vp-custom-block-tip-text: var(--vp-c-brand-lightest);
--vp-custom-block-tip-bg: var(--vp-c-brand-dimm);
}

/**
* Component: Algolia
* -------------------------------------------------------------------------- */

.DocSearch {
--docsearch-primary-color: var(--vp-c-brand) !important;
}

/**
* VitePress: Custom fix
* -------------------------------------------------------------------------- */

/*
Use lighter colors for links in dark mode for a11y.
Also specify some classes twice to have higher specificity
over scoped class data attribute.
*/
.dark .vp-doc a,
.dark .vp-doc a > code,
.dark .VPNavBarMenuLink.VPNavBarMenuLink:hover,
.dark .VPNavBarMenuLink.VPNavBarMenuLink.active,
.dark .link.link:hover,
.dark .link.link.active,
.dark .edit-link-button.edit-link-button,
.dark .pager-link .title {
color: var(--vp-c-brand-lighter);
}

.dark .vp-doc a:hover,
.dark .vp-doc a > code:hover {
color: var(--vp-c-brand-lightest);
opacity: 1;
}

/* Transition by color instead of opacity */
.dark .vp-doc .custom-block a {
transition: color 0.25s;
}

.vp-sponsor.aside .vp-sponsor-grid.mini .vp-sponsor-grid-image {
max-width: 124px;
}
.VPImage.image-src{
    filter: drop-shadow(10px 10px 10px rgba(0, 0, 0, .5));
    transform: translate(-50%, -50%) scale(0.8);
}
.VPButton.brand{
    background-color: var(--vp-c-brand);
}

strong{
    color: var(--vp-c-brand-light);
}

.code-size{
    position: absolute;
    color: #eee;
    font-size: 12px;
    bottom: 5px;
    right: 0px;
    z-index: 2;
    padding: 0 5px;
    background-color: #111c;
    border-radius: 2px;
    font-family: Monaco, "Courier New", monospace;
}